<template>
  <div class="padding-trbl-20 margin-b-60">
    <!-- 条件筛选 S -->
    <div class="searchBox rela flex-row row-between margin-b-20">
      <div class="search_l_bg abso bg-themecolor"></div>
      <div class="search_l">
        <div class="searchItem flex-row">
          <div class="flex-row font-14">
            选择月份：
            <el-date-picker
              v-model="selectTimeVal"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择月"
              :picker-options="pickerOptions"
              @change="timeValChange"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div
        class="exportBtn pointer bg-violet text-white padding-l-10 padding-r-10 abso"
      >
        导出月报
      </div>
    </div>
    <!-- 条件筛选 E -->

    <div ref="printDemo">
      <div class="flex-row width100">
        <div class="card1 margin-r-20">
          <el-card>
            <Title title="本月工单办理量统计"></Title>
            <div class="flex-row card1Content margin-t-20 padding-l-30">
              <div class="card1Content_l text-gray margin-r-50 pointer rela">
                <div @click="orderListChange('month')">
                  工单办理总量
                  <div class="font-46 margin-b-20 margin-t-10 text-black">
                    {{ card1Data.total.count }}
                    <span class="font-14 text-gray">件</span>
                  </div>
                  <lineProgress
                    :title="
                      card1Data.total.add
                        ? '环比去年' + lastMonth + '月增长'
                        : '环比去年' + lastMonth + '月下降'
                    "
                    :percentage="
                      card1Data.total.count == 0
                        ? 0
                        : card1Data.total.percentage >= 100
                        ? 100
                        : card1Data.total.percentage
                    "
                    :showtext="false"
                    :showtextVal="
                      card1Data.total.count == 0 ? 0 : card1Data.total.huanbiPct
                    "
                    :icon="card1Data.total.add ? 'rise' : 'decline'"
                    percentageColor="#ff00f0"
                    titleColor="#409EFF"
                  ></lineProgress>
                </div>
                <div class="margin-t-50" v-show="false">
                  信件工单中：
                  <div class="flex-row margin-t-30 font-14 row-between">
                    <template v-for="(item, index) in card1Data.list">
                      <div
                        class="pointer"
                        :key="index"
                        v-if="item.type == 'SHIZHANG'"
                        @click="onMonth(item)"
                      >
                        <img
                          src="@/assets/images/shizhang.png"
                          class="categoryIcon margin-r-4"
                        />
                        {{ item.title }}：{{ item.number }} 单
                      </div>
                      <div
                        class="pointer"
                        :key="index"
                        v-if="item.type == 'SHUJI'"
                        @click="onMonth(item)"
                      >
                        <img
                          src="@/assets/images/shuji.png"
                          class="categoryIcon margin-r-4"
                        />
                        {{ item.title }}：{{ item.number }} 单
                      </div>
                    </template>
                  </div>
                </div>
                <div class="line abso bg-light-gray"></div>
              </div>
              <div class="card1Content_r rela padding-l-50">
                <div class="card1Line abso"></div>
                <div class="card1DataList">
                  <div
                    class="card1DataItem pointer"
                    v-for="(item, index) in card1Data.list"
                    :key="index"
                    @click="orderListChange('month', item.title)"
                  >
                    <div
                      class="font-16 text-gray"
                      :class="index > 0 ? ' margin-t-10' : ''"
                    >
                      {{ item.title }}
                    </div>
                    <div class="flex-row">
                      <el-progress
                        :show-text="false"
                        :stroke-width="10"
                        :percentage="
                          item.percentage >= 100 ? 100 : item.percentage
                        "
                      ></el-progress>
                      <div class="margin-l-20 text-right flex-row progressInfo">
                        <div class="company">{{ item.number }} 单</div>
                        <div class="margin-l-20 proportion">
                          占比：
                          <span class="line-block"
                            >{{ item.number > 0 ? item.proportion : 0 }}%</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="card2">
          <el-card class="rela">
            <Title title="本月工单办理内容统计"></Title>
            <div class="text-gray font-12 company abso">
              单位：件
            </div>
            <div
              class="month_card2Echart margin-t-50"
              id="month_card2Echart"
            ></div>
          </el-card>
        </div>
      </div>
      <div class="flex-row margin-t-20 width100 card4">
        <el-card class="rela">
          <Title title="本月部门办理量统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div
            class="month_card3Echart margin-t-60"
            id="month_card3Echart"
          ></div>
        </el-card>
      </div>
      <div class="flex-row width100 margin-t-20">
        <div class="margin-r-20">
          <el-card class="card5">
            <Title title="本月满意率、回复周期统计"></Title>
            <div class="padding-l-30 margin-t-40 flex-row row-between">
              <div
                class="orderStateItem border-right padding-r-50"
                v-for="(item, index) in orderState"
                :key="index"
              >
                <div class="font-14 text-gray">{{ item.title }}</div>
                <div class="font-46" :style="{ color: orderStateColor[index] }">
                  {{ item.number }}
                  <span class="font-14 text-gray line-block" v-if="index == 0"
                    >%</span
                  >
                  <span class="font-14 text-gray line-block" v-if="index == 1"
                    >天</span
                  >
                  <span class="font-14 text-gray line-block" v-if="index == 2"
                    >件</span
                  >
                </div>
                <lineProgress
                  class="margin-t-40"
                  :title="item.add ? '环比上月增长' : '环比上月下降'"
                  :percentage="
                    item.number > 0 ? Math.round(item.percentage) : 0
                  "
                  :showtext="false"
                  :showtextVal="item.number > 0 ? item.showtextVal : '0'"
                  :strokeWidth="10"
                  titleColor="#5673ca"
                  :percentageColor="item.percentageColor"
                  :icon="item.icon"
                ></lineProgress>
              </div>
            </div>
          </el-card>
          <el-card class="card6 margin-t-20">
            <div class="cardTitleBox rela">
              <Title title="本月重复事件统计"></Title>
              <div
                class="cardMore text-dark-gray font-12 abso pointer"
                @click="maskToggle"
              >
                更多<i class="el-icon-d-arrow-right"></i>
              </div>
            </div>
            <div class="hotEvents padding-l-20 padding-r-20 margin-t-40">
              <template v-for="(item, index) in repeatList">
                <div
                  class="hotEventsItem rela pointer"
                  :key="index"
                  v-if="index < 6"
                  @mouseover="repeatMouseover(index)"
                  @mouseout="repeatMouseout"
                  @click="orderListChange('month', '', item.sjh)"
                >
                  <lineProgress1
                    class="margin-t-10"
                    :title="item.title"
                    :number="item.number"
                    :percentage="
                      Math.round((item.number / (maxReplat + 5)) * 100)
                    "
                    :roundLeft="1"
                    :showtext="false"
                    :strokeWidth="10"
                  ></lineProgress1>
                  <div
                    class="repeatContentBox abso text-white"
                    v-if="(replatShowIndex == index) & !maskShow"
                  >
                    <div class="text-line-cut repeatContent">
                      {{ item.content }}
                    </div>
                    <div class="sanjiao_down abso"></div>
                  </div>
                </div>
              </template>
              <div
                class="text-dark-gray font-14 text-center"
                style="margin-top: 150px;"
                v-if="repeatList == ''"
              >
                暂无数据
              </div>
            </div>
          </el-card>
        </div>
        <div class="">
          <el-card class="card7">
            <Title title="本月不满意事件分析"></Title>
            <div class="card7Content">
              <div class=" font-18 text-gray margin-t-40">
                按办理内容统计
              </div>
              <div class="flex-row">
                <div class="month_card7Echart" id="month_card7Echart1"></div>
                <div class="card7EchartList">
                  <div
                    class="card7EchartItem flex-row pointer"
                    :class="index > 0 ? 'margin-t-20' : ''"
                    v-for="(item, index) in card7Data[0]"
                    :key="index"
                    @click="onMonth(item)"
                  >
                    <div
                      class="card7EchartItem_l font-12 padding-l-20 rela text-gray text-cut"
                    >
                      <span
                        class="abso"
                        :class="{
                          'bg-light-blue': index == 0,
                          'bg-pink': index == 1,
                          'bg-violet': index == 2,
                          'bg-light-gray': index == 3,
                          'bg-light-purple': index == 4
                        }"
                      ></span
                      >{{ item.majorCatName }}
                    </div>
                    <div class="card7EchartItem_c font-14 text-right text-gray">
                      <span
                        class="font-24 line-block text-right"
                        :class="{
                          'text-light-blue': index == 0,
                          'text-pink': index == 1,
                          'text-violet': index == 2,
                          'text-light-gray': index == 3,
                          'text-light-purple': index == 4
                        }"
                        >{{ item.count }}</span
                      >件
                    </div>
                    <div class="card7EchartItem_r font-12">{{ item.pct }}%</div>
                  </div>
                </div>
              </div>
              <div class=" font-18 text-gray margin-t-20">
                按办理部门（社区）统计
              </div>
              <div class="flex-row">
                <div class="month_card7Echart" id="month_card7Echart2"></div>
                <div class="card7EchartList">
                  <div
                    class="card7EchartItem flex-row pointer"
                    :class="index > 0 ? 'margin-t-20' : ''"
                    v-for="(item, index) in card7Data[1]"
                    :key="index"
                    @click="oncommunity(item)"
                  >
                    <div
                      class="card7EchartItem_l font-12 padding-l-20 rela text-gray text-cut"
                    >
                      <span
                        class="abso"
                        :class="{
                          'bg-light-blue': index == 0,
                          'bg-pink': index == 1,
                          'bg-violet': index == 2,
                          'bg-light-gray': index == 3,
                          'bg-light-purple': index == 4
                        }"
                      ></span
                      >{{ item.deptName }}
                    </div>
                    <div class="card7EchartItem_c font-14 text-right text-gray">
                      <span
                        class="font-24 line-block text-right"
                        :class="{
                          'text-light-blue': index == 0,
                          'text-pink': index == 1,
                          'text-violet': index == 2,
                          'text-light-gray': index == 3,
                          'text-light-purple': index == 4
                        }"
                        >{{ item.count }}</span
                      >件
                    </div>
                    <div class="card7EchartItem_r font-12">{{ item.pct }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 重复事件更多 -->
    <div class="maskBox" v-if="maskShow">
      <div class="maskContentBox bg-white rela padding-trbl-20">
        <div class="closeMask abso pointer" @click="maskToggle">
          <i class="el-icon-close"></i>
        </div>
        <div class="maskContent margin-t-40">
          <div class="hotEvents margin-l-30 margin-t-30 margin-r-30">
            <div
              class="text-dark-gray font-14 text-center"
              style="margin-top: 100px;"
              v-if="repeatList == ''"
            >
              暂无数据
            </div>
            <template v-for="(item, index) in repeatList">
              <div
                class="hotEventsItem rela pointer"
                :key="index"
                @mouseover="repeatMouseover(index)"
                @mouseout="repeatMouseout"
                @click="orderListChange('month', '', item.sjh)"
              >
                <lineProgress1
                  class="margin-t-10"
                  :title="item.title"
                  :number="item.number"
                  :percentage="
                    Math.round((item.number / (maxReplat + 5)) * 100)
                  "
                  :roundLeft="1"
                  :showtext="false"
                  :strokeWidth="10"
                ></lineProgress1>
                <div
                  class="repeatContentBox abso text-white"
                  v-if="replatShowIndex == index && maskShow"
                >
                  <div class="text-line-cut repeatContent">
                    {{ item.content }}
                  </div>
                  <div class="sanjiao_down abso"></div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <Pagination
          class="Pagination"
          :totalSize="totalSize"
          :current="currentPage.current"
          :size="currentPage.size"
          @pageChange="currentPageChange"
          @sizeChange="currentSizeChange"
        ></Pagination>
      </div>
    </div>
    <!-- 月报 -->
    <!-- <reportForm
      :exportFormData="exportFormData"
      :dateTime="dateTime"
      v-if="reportFormShow"
      @reportFormHide="reportFormToggle"
    ></reportForm> -->
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :sourceId="sourceId"
        :nrlb="nrlb"
        :deptId="deptId"
        :bumanyi="bumanyi"
        :sjh="sjh"
      ></orderList>
    </el-dialog>
  </div>
</template>
<script>
import Title from '../../../components/title.vue'
import lineProgress from '../../../components/lineProgress/lineProgress.vue'
import lineProgress1 from '../../../components/lineProgress/lineProgress1.vue'
import Pagination from '../../../components/pagination.vue'
import * as echarts from 'echarts'
import { sort, stopBodyScroll } from '../../../assets/js/public.js'
import orderList from './order/orderlist.vue'
// import reportForm from '@/components/monthlyReport.vue'

export default {
  components: {
    Title,
    lineProgress,
    lineProgress1,
    Pagination,
    orderList
    // reportForm
  },
  data () {
    return {
      card1Data: {
        total: {},
        list: []
      },
      lastMonth: '',
      orderState: [],
      orderStateColor: ['#35ca1c', '#6d9fff', '#9865ff'],
      repeatList: [],
      replatSortArray: [],
      replatShowIndex: -1,
      maxReplat: 0,
      // 不满意件
      card7Data: [],
      selectTimeVal: '',
      systemYear: '',
      systemYear: '',
      pickerOptions: {
        disabledDate (time) {
          let startYear = '1577808000000'
          return time.getTime() > Date.now() || time.getTime() < startYear
        }
      },
      currentPage: {
        current: 1,
        size: 20
      },
      totalSize: 0,
      maskShow: false,
      maskType: '',
      reportFormShow: false,
      exportFormData: [],
      dateTime: '',
      orderListShow: false,
      fullScreen: true,
      sourceList: [
        { id: '10000', label: '市长信箱' },
        { id: '12306', label: '市人社局长信箱' },
        { id: '12333', label: '信访信息系统' },
        { id: '10010', label: '大联动' },
        { id: '12388', label: '人民网' },
        { id: '12580', label: '企业服务网' },
        { id: '10086', label: '公众信息网' }
      ],
      duration: null,
      date: null,
      sourceId: null,
      nrlb: null,
      deptId: null,
      bumanyi: null,
      sjh: null
    }
  },
  mounted () {
    const date = new Date()
    this.systemYear = date.getFullYear() + '-' + parseInt(date.getMonth() + 1)
    this.dateTime =
      date.getFullYear() +
      '年' +
      parseInt(date.getMonth() + 1) +
      '月' +
      date.getDate() +
      '日'
    let month =
      parseInt(date.getMonth() + 1) > 9
        ? parseInt(date.getMonth() + 1)
        : '0' + parseInt(date.getMonth() + 1)
    console.log('month', month)
    this.selectTimeVal = date.getFullYear() + '-' + month
    console.log('selectTimeVal', this.selectTimeVal)
    console.log('systemYear', this.systemYear)

    this.timeValChange()
  },
  methods: {
    // 获取数据 本月工单办理量
    async getGdBlTj () {
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      let month = year.slice(5, year.length)
      if (month.length < 2) {
        this.lastMonth = '0' + year.slice(5, year.length)
      } else {
        this.lastMonth = year.slice(5, year.length)
      }
      const res = await this.$api.getMonthGdBlTj(year)

      this.card1Data = {
        total: {},
        list: []
      }
      res.forEach((item, index) => {
        let itemObj = ''
        if (item.type != 'TOTAL') {
          itemObj = {
            type: item.type,
            title: item.typeName,
            number: item.count,
            percentage: item.pct > 2 ? item.pct : item.pct > 0 ? 2 : item.pct,
            proportion: item.pct
          }
          this.card1Data.list.push(itemObj)
        } else {
          let obj = {
            add: item.add,
            count: item.count,
            percentage: item.huanbiPct,
            huanbiPct: item.huanbiPct.toString()
          }
          this.card1Data.total = obj
        }
      })
    },
    // 获取数据 本月工单办理内容
    async getNrlb () {
      const that = this
      let year =
        that.selectTimeVal != '' && that.selectTimeVal != null
          ? that.selectTimeVal
          : that.systemYear
      if (year == null) {
        year = that.systemYear
      }
      const res = await that.$api.getMonthNrlb(year)
      let data1 = []
      let data2 = []
      let data3 = []
      if (res != '') {
        res.forEach(item => {
          data1.push(item.majorCatName)
          data2.push(item.count)
          data3.push(item)
        })
      }
      const yb_chartDom1 = document.getElementById('month_card2Echart')
      const yb_myChart1 = echarts.init(yb_chartDom1)
      const yb_option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return (
              params[0].name +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff;margin-right:5px;"></span>' +
              params[0].seriesName +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params[0].value +
              '</span><span style="font-size: 10px;"> 件</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        color: ['#8565ff'],
        grid: {
          left: '20px',
          right: '25px',
          bottom: '40px',
          top: '20px',
          containLabel: true
        },
        textStyle: {
          color: '#666'
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 标签设置为全部显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的字数
                var provideNumber = 6 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: function (value) {
              if (value.max == 0) {
                return 5
              }
            }
          }
        ],
        series: [
          {
            name: '总计',
            type: 'bar',
            barWidth: '24px',
            data: data2,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      yb_option1 && yb_myChart1.setOption(yb_option1)
      setTimeout(function () {
        window.onresize = function () {
          yb_myChart1.resize()
        }
      }, 100)
      yb_myChart1.on('click', function (param) {
        console.log(param)
        if (param.name !== '其他') {
          // that.nrlb = param.name
          data3.map(item => {
            if (item.majorCatName == param.name) {
              that.nrlb = item.majorCatId
            }
          })
        } else {
          let nrlbArray = []
          data3.forEach(item => {
            if (item.majorCatName !== '其他') {
              nrlbArray.push(item.majorCatId)
            }
          })
          that.nrlb = nrlbArray.filter(Boolean)
        }
        that.orderListChange('month')
      })
    },
    // 获取数据 本月部门办理量
    async getBmblTj_m () {
      const that = this
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      if (year == null) {
        year = this.systemYear
      }
      const res = await that.$api.getBmblTj_m(year)
      let data = []
      let bumenList = []
      res.forEach(item => {
        data.push(item.count)
        bumenList.push(item.sqName)
      })
      const yb_chartDom2 = document.getElementById('month_card3Echart')
      const yb_myChart2 = echarts.init(yb_chartDom2)
      const yb_option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return (
              params[0].name +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff";margin-right:5px;"></span>' +
              params[0].seriesName +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params[0].value +
              '</span><span style="font-size: 10px;"> 件</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        color: ['#8565ff'],
        grid: {
          left: '10px',
          right: '10px',
          bottom: '40px',
          top: '20px',
          containLabel: true
        },
        textStyle: {
          color: '#666'
        },
        xAxis: [
          {
            type: 'category',
            data: bumenList,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 标签设置为全部显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的字数
                var provideNumber = 10 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: function (value) {
              if (value.max == 0) {
                return 5
              }
            }
          }
        ],
        series: [
          {
            name: '总计',
            type: 'bar',
            barWidth: '24px',
            data: data,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      yb_option2 && yb_myChart2.setOption(yb_option2)
      setTimeout(function () {
        window.onresize = function () {
          yb_myChart2.resize()
        }
      }, 100)
      yb_myChart2.on('click', function (param) {
        res.forEach(item => {
          if (param.name == item.sqName) {
            that.deptId = item.sqId
          }
        })
        that.orderListChange('month')
      })
    },
    // 获取数据 满意率、回复率
    async getGdqktj () {
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      if (year == null) {
        year = this.systemYear
      }
      const res = await this.$api.getMonthGdqktj(year)
      this.orderState = [
        {
          title: '满意率',
          number: res.curMydPct,
          percentage: res.hbqnMydYPct,
          showtextVal: res.hbqnMydYPct.toString(),
          add: res.addMydY,
          percentageColor: res.addMydY ? '#35ca1c' : '#ff3a3a',
          icon: res.addMydY ? 'rise' : 'decline'
        },
        {
          title: '平均回复周期',
          number: res.curAvgHf,
          percentage: res.hbqnAvgHfYPct,
          showtextVal: res.hbqnAvgHfYPct.toString(),
          add: res.addAvgHfY,
          percentageColor: res.addAvgHfY ? '#ff3a3a' : '#35ca1c',
          icon: res.addAvgHfY ? 'rise3' : 'decline3'
        },
        {
          title: '环比转办量',
          number: res.curThlPct,
          percentage: res.hbqnThlYPct,
          showtextVal: res.hbqnThlYPct.toString(),
          add: res.addThlY,
          percentageColor: res.addThlY ? '#35ca1c' : '#ff3a3a',
          icon: res.addThlY ? 'rise' : 'decline'
        }
      ]
    },
    // 获取数据 不满意事件统计
    async getBmytj () {
      const that = this
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      const res = await this.$api.getMonthBmytj(year)
      this.card7Data = res
      let date1 = []
      let date2 = []
      let date3 = []
      let number1 = 0
      let number2 = 0
      res[0].forEach(item => {
        let obj = {
          value: item.count,
          name: item.majorCatName,
          majorCatId: item.majorCatId
        }
        number1 += parseInt(item.count)

        date1.push(obj)
        date3.push(item)
      })
      res[1].forEach(item => {
        let obj = {
          value: item.count,
          name: item.deptName,
          deptId: item.deptId
        }
        number2 += parseInt(item.count)
        date2.push(obj)
      })

      // 按办理内容统计
      const yb_chartDom3 = document.getElementById('month_card7Echart1')
      const yb_myChart3 = echarts.init(yb_chartDom3)
      const yb_option3 = {
        title: [
          {
            text: '不满意件总数',
            x: 'center',
            top: '42%',
            textStyle: {
              color: 'black',
              fontSize: 20,
              fontWeight: '100'
            }
          },
          {
            text: number1,
            x: 'center',
            top: '60%',
            textStyle: {
              fontSize: 30,
              color: '#3584f3',
              foontWeight: '500'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '0',
          left: 'right',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            name: '工单内容类别',
            color: ['#6d9fff', '#df87ff', '#8565ff', '#e1e2e3', '#c49ef9'],
            radius: ['70%', '95%'],
            avoidLabelOverlap: false,
            legendHoverLink: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: date1
          }
        ]
      }
      yb_option3 && yb_myChart3.setOption(yb_option3)
      yb_myChart3.on('click', function (param) {
        if (param.name == '其他') {
          let nrlbArray = date3.map(item => {
            return item.majorCatId
          })
          that.nrlb = nrlbArray.filter(Boolean)
        } else {
          date1.map(item => {
            if (item.name == param.name) {
              that.nrlb = item.majorCatId
            }
          })
        }
        that.bumanyi = true
        that.orderListChange('month')
      })
      // 按办理部门（社区）统计
      const yb_chartDom4 = document.getElementById('month_card7Echart2')
      const yb_myChart4 = echarts.init(yb_chartDom4)
      let colorList = []
      switch (date2.length) {
        case 2:
          colorList = ['#6d9fff', '#df87ff']
          break
        case 3:
          colorList = ['#6d9fff', '#df87ff', '#8565ff']
          break
        case 3:
          colorList = ['#6d9fff', '#df87ff', '#8565ff', '#e1e2e3', '#c49ef9']
          break
        default:
          colorList = ['#6d9fff', '#df87ff']
          break
      }

      const yb_option4 = {
        title: [
          {
            text: '不满意件总数',
            x: 'center',
            top: '42%',
            textStyle: {
              color: 'black',
              fontSize: 20,
              fontWeight: '100'
            }
          },
          {
            text: number2,
            x: 'center',
            top: '60%',
            textStyle: {
              fontSize: 30,
              color: '#3584f3',
              foontWeight: '500'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '0',
          left: 'right',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            name: '办理部门',
            color: ['#6d9fff', '#df87ff', '#8565ff', '#e1e2e3', '#c49ef9'],
            radius: ['70%', '95%'],
            avoidLabelOverlap: false,
            legendHoverLink: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: date2
          }
        ]
      }
      yb_option4 && yb_myChart4.setOption(yb_option4)
      setTimeout(function () {
        window.onresize = function () {
          yb_myChart3.resize()
          yb_myChart4.resize()
        }
      }, 100)
      yb_myChart4.on('click', function (param) {
        that.bumanyi = true
        that.deptId = param.data.deptId
        that.orderListChange('month')
      })
    },
    // 获取数据 重复事件统计
    async getRepeat () {
      let duration =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      const res = await this.$api.getMonthRepeat(duration, this.currentPage)
      // if (this.currentPage.current == 1) {
      this.repeatList = []
      this.replatSortArray = []
      // }
      res.records.forEach(item => {
        let obj = {
          ldr: item.ldr,
          sjh: item.sjh,
          content: item.content,
          title: item.ldr + ' ' + item.sjh + ' - ' + item.content,
          number: item.count
        }
        this.repeatList.push(obj)
        this.replatSortArray.push(item.count)
      })
      console.log(this.repeatList)
      this.maxReplat = sort(this.replatSortArray)[0]
      this.totalSize = res.total
    },
    timeValChange () {
      // 时间筛选
      this.getGdBlTj()
      this.getNrlb()
      this.getBmblTj_m()
      this.getGdqktj()
      this.getBmytj()
      this.getRepeat()
    },
    repeatMouseover (index) {
      this.replatShowIndex = index
    },
    repeatMouseout () {
      this.replatShowIndex = -1
    },
    currentPageChange (page) {
      this.currentPage.current = page
      this.getRepeat()
    },
    currentSizeChange (size) {
      this.currentPage.size = size
      this.getRepeat()
    },
    maskToggle () {
      if (this.maskShow == false) {
        this.currentPage.current = 1
      }
      this.maskShow = !this.maskShow
      if (this.maskShow) {
        this.getRepeat()
        stopBodyScroll(true)
      } else {
        stopBodyScroll(false)
      }
    },
    orderListChange (duration, sourceName, sjh) {
      // console.log(duration, sourceName, sjh);

      // 年月日类型
      this.duration = duration
      // 时间
      this.date =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : this.systemYear
      // 工单来源
      this.sourceList.forEach(item => {
        if (sourceName === item.label) {
          this.sourceId = item.id
        }
      })
      // 手机号
      this.sjh = sjh
      this.orderListShow = true
    },
    // 不满意件分析
    onMonth (item) {
      let nrlb = null
      if (!item.majorCatId) {
        nrlb = this.card7Data[0].map(Mapitem => {
          return Mapitem.majorCatId
        })
        nrlb = nrlb.filter(Boolean)
      } else {
        nrlb = item.majorCatId
      }
      console.log(nrlb)
      this.nrlb = nrlb
      this.bumanyi = true
      this.orderListChange('month')
    },
    // 不满意件分析(社区)
    oncommunity (item) {
      this.bumanyi = true
      this.deptId = item.deptId
      this.orderListChange('month')
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.sourceId = null
      this.nrlb = null
      this.deptId = null
      this.bumanyi = null
      this.sjh = null
    },
    // 报表数据
    async exportMonth () {
      const that = this
      let year = that.selectTimeVal != '' ? that.selectTimeVal : ''
      const res = await exportMonthData(year)
      const resData = res.data
      if (!resData) return
      that.exportFormData = resData
      that.reportFormShow = true
      stopBodyScroll(true)
      setTimeout(function () {
        that.fullscreenLoading = false
      }, 3000)
    },
    reportFormToggle (param) {
      if (param == false) {
        this.reportFormShow = param
        stopBodyScroll(false)
      } else {
        this.fullscreenLoading = true
        this.exportMonth()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.searchBox {
  height: 60px;
  line-height: 60px;
  background: #e5f1fb;
  padding: 0 30px 0 20px;
  .search_l_bg {
    width: 6px;
    left: 0;
    top: 0;
    height: 100%;
  }
  .resetBtn {
    width: 90px;
    height: 36px;
  }
}
.el-card {
  width: 100%;
  height: 100%;
}
.card1 {
  width: 840px;
  height: 460px;
  .card1Content {
    .card1Content_l {
      width: 280px;
      .el-progress {
        width: 180px;
      }
      .categoryIcon {
        vertical-align: bottom;
      }
      .line {
        width: 1px;
        height: 180px;
        right: -50px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .card1Content_r {
      width: 450px;
    }
    .card1DataList {
      .card1Line {
        width: 1px;
        height: 150px;
        background: #f5f5f5;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .el-progress {
        width: 200px;
      }
      .progressInfo {
        color: #656d92;
        .company {
          width: 60px;
        }
        .proportion {
          width: 120px;
          span {
            width: 60px;
          }
        }
      }
    }
  }
}
.card2 {
  width: 820px;
  height: 460px;
  .company {
    top: 60px;
    left: 30px;
  }
  .month_card2Echart {
    width: 780px;
    height: 400px;
  }
}
.card4 {
  height: 410px;
  .company {
    top: 60px;
    left: 30px;
  }
  .month_card3Echart {
    width: 1620px;
    height: 320px;
  }
}
.card5 {
  width: 910px;
  height: 280px;
  .orderStateItem {
    width: calc(100% - 250px / 3);
    padding-left: 50px;
  }
  .orderStateItem:first-child {
    padding-left: 0;
  }
}
.card6 {
  width: 910px;
  height: 450px;
  overflow: visible;
  .hotEventsItem {
    margin-top: 20px;
    .repeatContentBox {
      bottom: 40px;
      .repeatContent {
        -webkit-line-clamp: 15;
      }
      .sanjiao_down {
        border-top: 20px solid rgba(0, 0, 0, 0.8);
      }
    }
  }
  .hotEventsItem:firsf-child {
    margin-top: 0;
  }
}
.card7 {
  width: 750px;
  height: 750px;
  .card7Content {
    padding-left: 15px;
    .month_card7Echart {
      width: 220px;
      height: 220px;
      margin: 20px 40px 40px 40px;
    }
    #card7Echart2 {
      margin-bottom: 0;
    }
    .card7EchartList {
      padding-right: 100px;
      .card7EchartItem_l {
        width: 180px;
        span {
          display: inline-block;
          width: 13px;
          height: 13px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .card7EchartItem_c {
        min-width: 90px;
        margin-left: 20px;
        margin-right: 20px;
        span {
          margin-right: 6px;
        }
      }
      .card7EchartItem_r {
        color: #4280ff;
      }
    }
  }
}
.cardTitleBox {
  .cardMore {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.maskBox {
  .closeMask {
    right: 10px;
    top: 10px;
    .el-icon-close {
      font-size: 32px;
    }
  }
  .maskContent {
    height: 90%;
    overflow-y: scroll;
    .hotEventsItem {
      .repeatContentBox {
        z-index: 999;
        .repeatContent {
          -webkit-line-clamp: 6;
        }
        .sanjiao_down {
          top: -20px;
          border-bottom: 20px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
  .Pagination {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
}
</style>
<style lang="less">
.card1Content {
  .card1Content_l {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #8b0dd9, #786fd5);
    }
  }
  .card1Content_r {
    .card1DataItem:nth-child(1) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #b989ff, #9b56ff);
      }
    }
    .card1DataItem:nth-child(2) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #e9bfff, #d789ff);
      }
    }
    .card1DataItem:nth-child(3) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #c7bef7, #8d77fc);
      }
    }
    .card1DataItem:nth-child(4) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #ff97b1, #fe7396);
      }
    }
    .card1DataItem:nth-child(5) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #ffc796, #fe9873);
      }
    }
    .card1DataItem:nth-child(6) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #b1f5f1, #6de6df);
      }
    }
    .card1DataItem:nth-child(7) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #9fd6fd, #63bbfa);
      }
    }
    .card1DataItem:nth-child(8) {
      .el-progress-bar__inner {
        background-image: linear-gradient(to right, #bad2fa, #73a6fc);
      }
    }
  }
}
.card5 {
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3083ed, #8d77fc);
  }
}
.card6,
.maskContent {
  .hotEvents {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #2f81ed, #2ee7d9) !important;
    }
  }
}
</style>
